<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>查看主推任务</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/platform.css" />
<link rel="stylesheet" href="css/table.css" />
<link rel="stylesheet" href="js/ui/jquery-ui.min.css" />
<link rel="stylesheet" href="css/mainpush.css" />
<style type="text/css">
	#taskProgress label {
		width: 150px;
		margin-bottom: 8px;
	}
	
	.numDiv, .amountDiv {
		border: 0.1px solid #7A6A72;
		width: 460px;
		height: 100px;
		float: right;
		margin-left: 10px;
	}
	
	.content {
		width: 448px;
		height: 50px;
		margin-left: 10px;
	}
	
	.bar {
		position: relative;
		width: 400px;
		border: 1px solid grey;
		padding: 1px;
		margin-bottom:8px;
		margin-right:40px;
	}
	
	.bar div {
		display: block;
		position: relative;
		background: grey;
		color: grey;
		height: 20px;
		line-height: 20px;
	}
	
	.bar div span {
		position: absolute;
		width: 400px;
		text-align: center;
		font-weight: bold;
	}
	
	#taskProgress .cnt-box {
		
		font-weight: bold;
		line-height: 25px;
		margin-right: 4px;
	}
	.cell span.read-txt {font-size: 12px;}
	.export-task {
		float: right;
	}
	.u-ipt{
		width: 200px;
	}
</style>

</head>

<body>
	<div class="container" ms-controller="mainController">
		<div class="header">
			<div class="u-title">查看主推任务</div>
		</div>
		<div class="cnt-box">
			<div class="u-multiform">
				<div class="column">
					<div class="cell">
						<label>任务主题：</label> <span class="read-txt">{{taskTopic}}</span> <span
							id="hqTaskIdCell" style="display: none;">{{hqTaskId}}</span>
						<div class="cell">
							<label>品类：</label>
							<div class="cnt-box">
								<span class="read-txt">{{cateName}}</span>
							</div>
						</div>
						<div class="cell">
							<label>占比：</label>
							<div class="cnt-box">
								<span class="read-txt">{{rate}}%</span>
							</div>
						</div>
						<div class="cell">
							<label>任务时间：</label>
							<div class="cnt-box">
								<span class="read-txt" id="rateCell">{{month}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="column" id="taskProgress">
					<div class="cell">
						<div class="amountDiv">
							<label>任务销售完成情况：</label>
							<div class="content">
								<div class="bar">
									<div>
										<span></span>
									</div>
								</div>
								<div class="cnt-box">
									<span class="read-txt">当前销售额(万元){{currentSaleAmount}}</span>
								</div>
								<div class="cnt-box rate">
									<span class="read-txt">已完成<span>{{saleAmountRate}}</span>%
									</span>
								</div>
								<div class="cnt-box">
									<span class="read-txt">品类销售额(万元){{cateSaleAmount}}</span>
								</div>
							</div>
						</div>
						<div class="numDiv">
							<label>任务数量完成情况：</label>
							<div class="content">
								<div class="bar">
									<div>
										<span></span>
									</div>
								</div>
								<div class="cnt-box">
									<span class="read-txt">当前销量(台){{currentSaleNum}}</span>
								</div>
								<div class="cnt-box rate">
									<span class="read-txt">已完成<span id="hqRate">{{saleNumRate}}</span>%
									</span>
								</div>
								<div class="cnt-box">
									<span class="read-txt">目标销量(台){{targetSaleNum}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="u-tabs">
				<div class="cnt-box" style="margin-bottom: 15px;">
					<div class="cnt push-goods">
						<input class="u-ipt" placeholder="输入大区编码或名称" />
						<button class="u-btn small" ms-click="queryTask">查询</button>
						<button class="u-btn small export-task" ms-click="exportTask">导出报表</button>
					</div>
				</div>
				<div class="cnt-box">
					<div class="cnt push-goods">
						<div id="taskTable22" ms-controller="taskTable22"></div>
						<script type="avalon" id="tabletask22">
                            <div class="tableWrapper">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>大区名称</th>
                                            <th>A类已销台数</th>
                                            <th>B类已销台数</th>
                                            <th>B2类已销台数</th>
 											<th>A类目标台数</th>
                                            <th>B类目标台数</th>
                                            <th>综合完成率</th>
 											<th>品类销售额</th>
                                            <th>A类销售额</th>
                                            <th>B类销售额</th>
											<th>B2类销售额</th>
                                            <th>销售占比</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ms-repeat-row="sources" ms-class="dis:row.commStatus==0">
                                            <td>{{row.disName}}</td>
                                            <td>{{row.saleNumA}}</td>
                                            <td>{{row.saleNumB}}</td>
                                            <td>{{row.saleNumB2}}</td>
											<td>{{row.targetNumA}}</td>
                                            <td>{{row.targetNumB}}</td>
                                            <td>{{row.completeRate.toFixed(1)}}%</td>
                                            <td>{{(row.cateSaleAmount != null)?(row.cateSaleAmount/10000).toFixed(2):''}}</td>
											<td>{{(row.saleAmountA!=null)?(row.saleAmountA/10000).toFixed(2):''}}</td>
                                            <td>{{(row.saleAmountB!=null)?(row.saleAmountB/10000).toFixed(2):''}}</td>
                                            <td>{{(row.saleAmountB2!=null)?(row.saleAmountB2/10000).toFixed(2):''}}</td>
                                            <td>{{row.saleRate.toFixed(1)}}%</td>
                                            <td class="operate">
                                                <a ms-if="row.disCode != '' && row.disCode!='00000'" href="javascript:;" ms-click="customFuncs.detailModel(row)">款数明细</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="13">
                                                <div class="pager">
                                                    <div class="first-page" ms-click="firstpage" ms-class={{firstpagestyle}}>首页</div>
                                                    <div class="pre-page" ms-click="prepage" ms-class={{prepagestyle}}>上一页</div>
                                                    <div class="current-page">
                                                        第<input class="current-page-num" type="text" ms-duplex="currentpage" ms-input="jumppage" />页
                                                        <span class="totalpage">共 {{totalpage}} 页</span>n 
                                                    </div>
                                                    <div class="next-page" ms-click="nextpage" ms-class={{nextpagestyle}}>下一页</div>
                                                    <div class="last-page" ms-click="lastpage" ms-class={{lastpagestyle}}>尾页</div>
                                                    <div class="messageinfo">{{startrow}}-{{endrow}} 共{{total}}条</div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </script>
					</div>
				</div>
			</div>
		</div>
		<div ms-controller="popController">
			<div class="u-popup" id="popup_import">
				<div class="bg"></div>
				<div class="asTable">
					<div class="asTableCell">
						<div class="asCell alert import">
							<a href="javascript:;" class="close btn-close">×</a>
							<p class="title">选择导入文件</p>
							<div class="container">
								<form id="form_file" enctype="multipart/form-data"
									autocomplete="off" method="post">
									<input type="file" name="file" accept=".xls,.xlsx"
										id="upladFile" /> <input type="hidden" name="hqTaskId"
										ms-attr-value="hqTaskId" />
								</form>
							</div>
							<div class="btn-box">
								<button class="u-btn" ms-click="uploadFile">确定</button>
								<button class="u-btn btn-close gray">取消</button>
							</div>
							<div id="load-import" class="loadData">
								<div class="la-ball-spin-clockwise-fade">
									<div></div>
									<div></div>
									<div></div>
									<div></div>
									<div></div>
									<div></div>
									<div></div>
									<div></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="u-popup distribution" id="popup_distribution">
				<div class="bg"></div>
				<div class="asTable-box">
					<div class="asTable">
						<div class="asTableCell">
							<div class="asCell dialog">
								<a href="javascript:;" class="close btn-close">×</a>
								<p class="title">款数明细</p>
								<div class="container">
									<form id="modelAlloForm" autocomplete="off" method="post">
										<input type="hidden" name="modelId" class="modelIdIpt" /> <input
											type="hidden" name="hqTaskId" class="hqTaskIdIpt" />
										<p class="total">
											品类总销售额：<span>{{(cateSaleAmount/10000).toFixed(2)}}</span>
										</p>
										<table class="table">
											<thead>
												<tr>
													<th>主推类型</th>
													<th>款数名称</th>
													<th>任务销售额</th>
													<th>销售占比</th>
													<th>目标台数</th>
													<th>完成台数</th>
													<th>完成率</th>
												</tr>
											</thead>
											<tbody>
												<tr ms-repeat-row="assignList">
													<td>{{row.taskType}}</td>
													<td>{{row.modelName}}</td>
													<td>{{(row.saleAmount/10000).toFixed(2)}}</td>
													<td>{{row.saleRate.toFixed(1)}}%</td>
													<td>{{row.targetNum}}</td>
													<td>{{row.saleNum}}</td>
													<td>{{row.completeRate.toFixed(1)}}%</td>
												</tr>

											</tbody>
										</table>
									</form>
									<div id="load-assign" style="display: none;">
										<div class="la-ball-spin-clockwise-fade">
											<div></div>
											<div></div>
											<div></div>
											<div></div>
											<div></div>
											<div></div>
											<div></div>
											<div></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="u-popup" id="popup_tips">
				<div class="bg"></div>
				<div class="asTable">
					<div class="asTableCell">
						<div class="asCell alert">
							<a href="javascript:;" class="close btn-close">×</a>
							<p class="title">提示</p>
							<div class="container">
								<div class="error"></div>
								<p style="max-height: inherit;"></p>
							</div>
							<div class="btn-box">
								<button class="u-btn btn-close">确定</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/avalon.shim.sn.js"></script>
		<script src="js/ui/jquery-ui.min.js"></script>
		<script src="js/ui/jquery-ui-timepicker-addon.js"></script>
		<script src="js/jquery.form.js"></script>
		<script src="js/swift-ui-table-1.1.js"></script>
		<script src="js/platform.js"></script>
		<script src="js/DataInterface/DataInterface.js"></script>
		<script src="js/viewHqTask.js"></script>
		<script type="text/javascript">
			$(function() {
				var loop = window.setInterval(function() {
					if ($("table td").length > 1) {
						var rate = $(".tableWrapper table tr:eq(1) td:eq(6)").html();
						$("#hqRate").html(rate.substring(0, rate.length-1))
						$("table td").css("padding", "8px");
						$(".numDiv .bar div").css("width", (parseInt($("#hqRate").html()) > 100 ? 100 : parseInt($("#hqRate").html())) + "%");
						window.clearInterval(loop);
					}
				}, 100);
			});
		</script>
</body>
</html>
